var React = require('react');
var Formsy = require('formsy-react');
require('./input.scss');
var GoMeInput = React.createClass({
  propTypes: {
    className: React.PropTypes.any,
    placeholder: React.PropTypes.string,
    onBlur: React.PropTypes.func,
    onFocus: React.PropTypes.func,
    tips: React.PropTypes.any,
    disabled: React.PropTypes.bool,
    type: React.PropTypes.any,
    FormItem: React.PropTypes.any,
    onChange: React.PropTypes.func,
    showNum: React.PropTypes.any,
    maxNum: React.PropTypes.any
  },
  getInitialState() {
    return {
      showTips: false,
      inputNum: 0,
      valueChange: false,
      showErrorMsg: false
    }
  },
  mixins: [Formsy.Mixin],
  // setValue() will set the value of the component, which in
  // turn will validate it and the rest of the form
  changeValue(event) {
    var { onChange } = this.props;

    this.setValue(event.currentTarget ? event.currentTarget.value : event);
    onChange && onChange(event.currentTarget ? event.currentTarget.value : event);
    this.setState({
      inputNum: event.target.getAttribute('type') == 'text' ? event.currentTarget.value.length : 0,
      valueChange: true
    })
  },
  onFocus() {
    if (!this.isValid()) {
      this.setState({
        showTips: true
      });
    }
    this.setState({
      showErrorMsg: false,
    });
    var { onFocus } = this.props;
    onFocus && this.props.onFocus(event);
  },
  onBlur(event) {
    this.setState({
      showErrorMsg: true,
      showTips: false,
    });
    var { onBlur } = this.props;
    onBlur && this.props.onBlur(event);
  },
  focusInput() {
    if(this.refs.dom_input){
      this.refs.dom_input.focus();
    }

  },
  render() {
    var { placeholder, tips, disabled, showNum, maxNum, FormItem, value, type, ...others } = this.props;
    var { showErrorMsg, showTips, inputNum, valueChange } = this.state;
    // Set a specific className based on the validation
    // state of this component. showRequired() is true
    // when the value is empty and the required prop is
    // passed to the input. showError() is true when the
    // value typed is invalid
    var className = 'input-wrapper ' + (this.props.className || ' ') +
      (this.showRequired() ? ' required' : this.showError() ? ' error' : '');

    // An error message is returned ONLY if the component is invalid
    // or the server has returned an error message
    var errorMessage = this.getErrorMessage();
    if (!FormItem) {
      FormItem = 'input';
    }
    if (!type) {
      type = 'text'
    }
    return (
      <div className={className}>
        <FormItem ref="dom_input" disabled={disabled} {...others} setValue={this.setValue}
          value={this.getValue()} onBlur={this.onBlur} onFocus={this.onFocus}
          placeholder={placeholder} onChange={this.changeValue} type={type}
        />
        {
          showNum && (!showErrorMsg || !errorMessage) ?
              <span className="num">{(valueChange ? inputNum : (value ? value.length : 0)) +"/"+ maxNum}</span> : null
        }
        <span className="tips">{!showNum && tips && showTips ? tips : null}</span>
        <span className="tips" style={{color: 'red'}}>{showErrorMsg ? errorMessage : null}</span>
      </div>
    );
  }
});
module.exports = GoMeInput;